<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-03-28 00:12:40
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-03-29 12:05:44
 * @FilePath: \mapview\src\components\HistoricalList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="historical-list" >
    <!-- <div class='historical-list-title'>
            <span>当日交易量最大停车场</span>
        </div> -->
		<div class="border--top-left border-view"></div>
    <div class="border--top-right border-view"></div>
    <div class="border--bottom-left border-view"></div>
    <div class="border--bottom-right border-view"></div>
        <div class="table">
            <div class="table-title">
                <div class="table-title-one">类型</div>
                <div class="table-title-three">车牌</div>
                <div class="table-title-four">报警</div>
                <div class="table-title-five">消息</div>
				<div class="table-title-two">时间</div>

            </div>
			<div class="table-list" ref="historicalList">
				<div class="historical-list-item" v-for="(item,index) in lishiData" :key="index" >
					<div class="table-title-one ">{{item.lei}}</div>
					<div class="table-title-three">{{ item.paizi }}</div>
					<div class="table-title-four">{{ item.baojing }}</div>
					<div class="table-title-five">{{ item.xiaoxi }}</div>
					<div class="table-title-two">{{ item.shijian }}</div>
				</div>
			</div>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
		lishiData:[
			{
				'lei':'危化品车辆',
				'shijian':'2024-03-17 09:23:13',
				'paizi':'辽C2F365',
				'baojing':'已处理',
				'xiaoxi':'危化品车辆未停在指定位置',
			},
			{
				'lei':'小客车',
				'shijian':'2024-03-17 10:11:56',
				'paizi':'京A12A66',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'大货车',
				'shijian':'2024-03-17 10:13:44',
				'paizi':'鲁B23E34',
				'baojing':'已处理',
				'xiaoxi':'非危化品车辆占用危化品车辆位置',
			},
			{
				'lei':'危化品车辆',
				'shijian':'2024-03-17 12:29:14',
				'paizi':'赣B53K24',
				'baojing':'已处理',
				'xiaoxi':'危化品车辆未停在指定位置',
			},
			{
				'lei':'大客车',
				'shijian':'2024-03-18 12:29:14',
				'paizi':'吉A892H1',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'小客车',
				'shijian':'2024-03-18 13:34:34',
				'paizi':'鲁D22H13',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'危化品车辆',
				'shijian':'2024-03-18 14:01:25',
				'paizi':'辽C66K62',
				'baojing':'已处理',
				'xiaoxi':'危化品车辆未停在指定位置',
			},
			{
				'lei':'危化品车辆',
				'shijian':'2024-03-18 16:22:43',
				'paizi':'黑B78W23',
				'baojing':'已处理',
				'xiaoxi':'危化品车辆未停在指定位置',
			},
			{
				'lei':'小客车',
				'shijian':'2024-03-19 10:44:04',
				'paizi':'辽A233S4',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'大客车',
				'shijian':'2024-03-19 11:22:44',
				'paizi':'辽B89H23',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'大客车',
				'shijian':'2024-03-19 12:06:33',
				'paizi':'辽H26312',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'危化品车辆',
				'shijian':'2024-03-19 12:42:03',
				'paizi':'鲁BKH298',
				'baojing':'已处理',
				'xiaoxi':'危化品车辆未停在指定位置',
			},
			{
				'lei':'小客车',
				'shijian':'2024-03-19 12:56:23',
				'paizi':'辽B8MQ02',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'危化品车辆',
				'shijian':'2024-03-19 13:06:53',
				'paizi':'辽BQ4E82',
				'baojing':'已处理',
				'xiaoxi':'危化品车辆未停在指定位置',
			},
			{
				'lei':'危化品车辆',
				'shijian':'2024-03-19 15:26:53',
				'paizi':'辽B183NS',
				'baojing':'已处理',
				'xiaoxi':'危化品车辆未停在指定位置',
			},
			{
				'lei':'大客车',
				'shijian':'2024-03-19 15:39:23',
				'paizi':'辽B8MQ02',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'小客车',
				'shijian':'2024-03-20 10:29:43',
				'paizi':'辽B6WY78',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'小客车',
				'shijian':'2024-03-20 10:50:23',
				'paizi':'辽BB23L6',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},
			{
				'lei':'危化品车辆',
				'shijian':'2024-03-20 11:35:43',
				'paizi':'冀B8568L',
				'baojing':'已处理',
				'xiaoxi':'危化品车辆未停在指定位置',
			},
			{
				'lei':'小客车',
				'shijian':'2024-03-20 12:00:23',
				'paizi':'辽BU79A5',
				'baojing':'已处理',
				'xiaoxi':'车辆未按指定位置停放',
			},

		],
      	scrollInterval: null,
    };
  },
  components: {},
  created() {},

  destroyed() {
    // 在组件销毁时清除定时器
    clearInterval(this.scrollInterval);
  },
  mounted() {
    const historicalList = this.$refs.historicalList;
    // 开始自动滚动
    this.startAutoScroll(historicalList);
  },

  methods: {
    // startAutoScroll(container) {
    //   // 每隔一定时间执行一次自动滚动函数
    //   this.scrollInterval = setInterval(() => {
    //     // 判断是否触底
    //     if (
    //       container.scrollTop >=
    //       container.scrollHeight - container.clientHeight
    //     ) {
    //       // 如果触底则停止自动滚动
    //       clearInterval(this.scrollInterval);
    //     } else {
    //       // 否则执行滚动
    //       this.scrollToBottom(container);
    //     }
    //   }, 500); // 这里的1000表示每隔1秒执行一次自动滚动
    // },
    // scrollToBottom(container) {
    //   // 判断是否已经触底
    //   if (
    //     container.scrollTop >=
    //     container.scrollHeight - container.clientHeight
    //   ) {
    //     // 如果已经触底，则回到最顶部
    //     container.scrollTop = 0;
    //   } else {
    //     // 否则执行滚动
    //     const scrollAmount = 5; // 每次滚动的距离
    //     const newScrollTop = container.scrollTop + scrollAmount;
    //     container.scrollTop = newScrollTop;
    //   }
    // },

	startAutoScroll(container) {
    let startTime = null;
    let duration = 10000; // 滚动到顶部的持续时间增加为10秒
    const distance = container.scrollHeight; // 滚动的距离为容器的高度

    const animateScroll = timestamp => {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const progress = elapsed / duration;

        container.scrollTop = progress * distance;

        if (elapsed < duration) {
            requestAnimationFrame(animateScroll);
        } else {
            // 滚动完成后重置起始时间并滚动到顶部
            startTime = null;
            container.scrollTop = 0;
            // 重新开始自动滚动
            requestAnimationFrame(animateScroll);
        }
    };

    const scrollToBottom = () => {
		console.log('触底了')
        // 滚动到底部
        container.scrollTop = container.scrollHeight;
        // 立即开始向上滚动
        requestAnimationFrame(animateScroll);
    };

    // 初始时先滚动到底部
    scrollToBottom();

    // 监听滚动事件，当滚动到底部时重新开始自动滚动
    container.addEventListener('scroll', () => {
        if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
            scrollToBottom();
        }
    });
}
  },
};
</script>

<style  scoped>
.historical-list{
	position: relative;
    color: #fff;
	border:2px solid #80BCF3;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 20px;
	padding:8px;
    height:calc( 400px - 20px);
}

.historical-list-title {
  height: 30px;
  /*border-bottom: 1px solid #fff*/
}

.historical-list-item {
  display: flex;
  width: 100%;
  /* justify-content: space-around; */
  height: 30px;
  /*border-bottom: 1px solid #fff*/
  align-items: center;}
.table-list{
	height: calc( 400px - 60px);
	overflow-y: scroll;
	max-height: calc( 400px - 60px);
}
.historical-list-item{
    display: flex;
    width: 100%;
    /* justify-content: space-around; */
    height: 30px;
    /*border-bottom: 1px solid #fff*/
    align-items: center;

}

.table-title {
  display: flex;
  /*border-bottom: 1px solid #fff*/
  height: 40px;
  align-items: center;
  /*background-color: #0091FF;*/
}

.table-title-one {
  text-align: center;
  flex: 1;
}

.table-title-two {
  text-align: center;
  flex: 2;
}

.table-title-three {
  flex: 1;
  text-align: center;
}

.table-title-four {
  text-align: center;
  flex: 1;
}

.table-title-five {
  text-align: center;
  flex: 2;
}

.historical-list-item:nth-child(odd) {
  /*background-color: #0091FF;*/
  color: #0091ff;
  color: #fff;
}

.historical-list-item:nth-child(even) {
  /*background-color: #09DEFF;*/
  color: #09deff;
  color: #fff;
}




.historical-list::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
}

/* Track */
.historical-list::-webkit-scrollbar-track {
  background: rgba(
    255,
    255,
    255,
    0.1
  ); /* Set the background color of the track */
}

/* Handle */
.historical-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1); /* Set the color of the scrollbar handle */
  border-radius: 5px; /* Add rounded corners to the scrollbar handle */
}
</style>
